<!--
 * @Author: your name
 * @Date: 2021-10-06 14:35:21
 * @LastEditTime: 2021-10-06 14:47:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue3.0\vue3_vite\src\pages\Ref_learn\toref.vue
-->
<template>
  <div>
    <h1>
      toRef
    </h1>

    <a-typography>

      <a-typography-title>count</a-typography-title>
      <a-typography-paragraph>
        <p>count1: {{ state.count1 }}</p>
        <p>countRef: {{ countRef }}</p>
        <p>count1Clone: {{ count1Clone }}</p>
        <a-space>
          <a-button type="primary" @click="changeCount('add')">增加</a-button>
          <a-button type="primary" @click="changeCount('reduce')">减少</a-button>  
        </a-space>  
      </a-typography-paragraph> 
      
    </a-typography>
    
  </div>
</template>

<script>
import { ref, toRef, reactive } from 'vue';

export default {
  setup(props) {
    let state = reactive({
      count1: 1,
      count2: 1,
    })
    const countRef = toRef(state, 'count1')
    const count1Clone = state.count1

    const changeCount = (type) => {
      if (type === 'add') {
        state.count1 ++
      } else {
        state.count1 --
      }
    }

    return {
      state,
      countRef,
      count1Clone,
      changeCount,
    }
  }
}
</script>

<style>

</style>